import React from "react";
import classNames from "classnames";
import { Tooltip } from "../../Tooltip";
import { Info } from "@ct0/icons";
import type { BaseItemType } from "../type";
import { useStyles } from "./styles";

export default function Item({
  item,
  isLast,
  columns,
  style,
  component,
  rowCount,
  emptyValueText,
}: {
  item: BaseItemType;
  columns: number;
  isLast: boolean;
  component: React.FC<{
    value: any;
    meta: any;
    emptyValueText?: React.ReactNode;
  }>;
  style?: React.CSSProperties;
  rowCount: number;
  emptyValueText?: React.ReactNode;
}) {
  const classes = useStyles();
  const { labelTips } = item;
  const C = component;

  const overlay =
    typeof labelTips == "string" ? (
      <div className={classes.overlay}>{labelTips}</div>
    ) : (
      labelTips
    );

  return (
    <div
      //处理columns 为 3时，最后一行，列数小于columns的flex
      className={classNames(
        "ct0-description-item",
        isLast &&
          columns === 3 &&
          rowCount < columns &&
          "ct0-description-item-last"
      )}
    >
      <div className="ct0-description-item-label" style={style}>
        <span className="ct0-description-item-label-text">{item.label}</span>
        {labelTips && (
          <Tooltip overlay={overlay}>
            <span className={classes.labelTips}>
              <Info />
            </span>
          </Tooltip>
        )}
      </div>
      <div className="ct0-description-item-content">
        <span className="ct0-description-item-content-text">
          <C
            value={item.value}
            meta={item.meta}
            emptyValueText={emptyValueText}
          />
        </span>
      </div>
    </div>
  );
}
